<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <img alt="小小游专属二维码" title="小小游专属二维码" />
        <script>
            /**
             * 1.需要放在xampp服务器下进行测试，不然会有跨域的问题
             * 2.我这里文件夹的名字有中文，注意只有涉及跟后台ajax
             * 动态交互的文件都不能出现中文，否则会出大事
             * 3.朋友们可以执行拷贝images目录和picReader.html文件
             * 到xampp服务器下进行测试哈
             */
            /**
             * 实现需求如下：
             * 通过动态ajax请求并转换图片二进制数据到ArrayBuffer对象中
             */

            // 获取图片元素
            let aImg = document.querySelectorAll('img')[0];

            // 创建ajax对象
            let oAjax = new XMLHttpRequest();

            // 设置服务器返回的响应类型为arraybuffer
            oAjax.responseType = 'arraybuffer';

            // 和服务器建立连接
            oAjax.open('GET', './images/xiaoyou.png', true);

            oAjax.onload = () => {
                let result = oAjax.response;
                console.log(result, result.byteLength);
                // Blob是二进制大字段对象，用来存储二进制字段
                let blob = new Blob([result]);
                aImg.src = window.URL.createObjectURL(blob);
            };

            // 正式发送数据，GET方式默认为空，本人喜欢写个null
            oAjax.send(null);
        </script>
    </body>
</html>
